<template>
  <div class="wrap">
    <div class="bg"></div>
    <div class="user-content">
      <p class="user-org">{{userName}}</p>
    </div>
    <div class="exit-content" @click="exit()">
      <p>退出</p>
    </div>
    <div class="content">
      <div class="title">
        <span>请选择功能模块</span>
      </div>
      <div class="choose-content clearfix">
        <div class="choose-col" v-for="(item,index) in showList" :key="index">
          <div class="item">
            <div class>
              <img :src="item.icon" alt srcset />
            </div>
            <p class="title-chinese">{{item.name}}</p>
            <p class="title-pinyin">{{item.English}}</p>
            <!-- <button class="detail-btn" @click="openPage_sjzx()">查看</button> -->
            <div class="detail-btn">
              <el-button
                type="text"
                @click="openPage_sjzx(index)"
                style="width: 100%;height: 100%;"
                :disabled="item.flag"
              >进入</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
// import json from "../static/urls.json"
export default {
  name: "index",
  data() {
    return {
      userName: localStorage.getItem("creater"),
      user: {
        name: "用户管理员 ：",
        org: ""
      },
      showList: [
        {
          name: "数据维护",
          English: "SHUJUWEIHU",
          bgc: require("../static/index/image/chose_sjzx_bg_nor.png"),
          icon: require("../../src/assets/image/indexImage/data.png"),
          disable: require("../../src/assets/image/indexImage/形状 7.png"),
          flag: true
        },
        {
          name: "单屏展示",
          English: "DANPINGZHANSHI",
          bgc: require("../static/index/image/chose_sjzx_bg_nor.png"),
          icon: require("../../src/assets/image/indexImage/small.png"),
          disable: require("../../src/assets/image/indexImage/形状 5.png"),
          flag: true
        },
        {
          name: "多屏展示",
          English: "DAPINGZHANSHI",
          bgc: require("../static/index/image/chose_sjzx_bg_nor.png"),
          icon: require("../../src/assets/image/indexImage/big.png"),
          disable: require("../../src/assets/image/indexImage/形状 5.png"),
          flag: true
        }
      ],
      urls: this.$config,
      token: ""
    };
  },
  methods: {
    //管理系统
    runRouter() {
      // let userInfoAdmin=localStorage.getItem("userInfoAdmin")
      this.$message({
        message: "请登录管理员账号进入管理系统",
        type: "warning"
      });
    },
    getUser() {
      let user = JSON.parse(localStorage.getItem("userInfo"));
      this.user.org = user.name;
      this.token = user.token;
      this.$axios.defaults.params = { token: token };
    },
    // getUrls(){
    //   let ts = this;
    //   this.$axios.get('../urls').then(function (res) {
    //     let data = res.data;
    //     ts.urls = data;
    //   })
    // },
    exit() {
      window.localStorage.setItem("userInfo", "");
      //let params = {token: localStorage.getItem("token")}
      this.$axios.get("/logout").then(res => {
        if (res.data.result.resultCode == "000000") {
          this.$message({
            type: "success",
            message: "已退出登录!"
          });
          setTimeout(() => {
            this.$router.push("/");
            localStorage.setItem("token", "");
          }, 100);
        }
      });
    },

    //数据展现跳转
    openPage_sjzx(index) {
      // window.location.href = this.$config.bigScreenUrl+"?token="+JSON.parse(localStorage.getItem('userInfo')).token;
      if (index == 0) {
        this.$router.push("/sjwh/sjsl");
      }
      if (index == 1) {
        window.location.href =this.$axios.defaults.LinkURL +"/index.html#/" +"?token=" +localStorage.getItem("token")+
        "&creater="+localStorage.getItem("creater")+"&rfdwmc="+localStorage.getItem("rfdwmc")+"&userID="+localStorage.getItem("userID")
        +"&rfdwnm="+localStorage.getItem("rfdwnm");
      }
      if (index == 2) {
        window.location.href =this.$axios.defaults.LinkURL +"/screen.html#/" +"?token=" +localStorage.getItem("token")+
        "&creater="+localStorage.getItem("creater")+"&rfdwmc="+localStorage.getItem("rfdwmc")+"&userID="+localStorage.getItem("userID")
        +"&rfdwnm="+localStorage.getItem("rfdwnm");
      }
    }

    //统计分析跳转
    // openPage_tjfx(){
    //   let urlObj = this.$config.zglocation.url;
    //   let data={username:'djjdjj',
    //     password:'678125ed4c20021e06015df135f6ff82',
    //     models:'tjfx'}
    //   axios.defaults.baseURL=this.$config.otherUrl
    //   axios.post('/rfsys/login',data)
    //     .then(function (res) {
    //       window.location.href=urlObj+res.data.data.url;
    //     })
    //     .catch(function (e,rep) {
    //     })

    // },

    //查询检索跳转
    // openPage_cxjs(){
    //   let urlObj = this.$config.zglocation.url;
    //   let data={username:'djjdjj',
    //     password:'678125ed4c20021e06015df135f6ff82',
    //     models:'qwjs'}
    //  axios.defaults.baseURL=this.$config.otherUrl
    //  this.$axios.post('/rfsys/login',data)
    //     .then(function (res) {
    //       window.location.href=urlObj+res.data.data.url;
    //     })
    //     .catch(function (e,rep) {
    //     })
    // },
  },
  mounted() {
    let roles = localStorage.getItem("roles");
    if (roles.indexOf("数据维护管理员") !== -1) {
      // if(true){
      // this.showList[0].disable=""
      this.$set(
        this.showList[0],
        "icon",
        require("../../src/assets/image/indexImage/形状 7.png")
      );
      this.$set(this.showList[0], "flag", false);
    }
    if (roles.indexOf("单屏管理员") !== -1) {
      this.$set(
        this.showList[1],
        "icon",
        require("../../src/assets/image/indexImage/形状 5.png")
      );
      this.$set(this.showList[1], "flag", false);
    }
    if (roles.indexOf("大屏管理员") !== -1) {
      this.$set(
        this.showList[2],
        "icon",
        require("../../src/assets/image/indexImage/形状 6.png")
      );
      this.$set(this.showList[2], "flag", false);
    }
    this.urls = this.$config;
  },
  beforeCreate() {
    // if(!sessionStorage.getItem('user')){
    //   this.$router.go(-1);
    // }
  }
};
</script>

<style scoped lang="less">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}
.wrap {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  .systemGl {
    width: 180px;
    height: 44px;
    line-height: 44px;
    padding-left: 70px;
    color: white;
    position: absolute;
    top: 44px;
    right: 200px;
    cursor: pointer;
    background: url("../static/login/image/系统管理_on.png") no-repeat;
    &:active {
      background: url("../static/login/image/系统管理.png") no-repeat;
    }
  }
  .bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-image: url("../../src/assets/image/底图.png");
    background-size: 100% 100%;
  }

  .user-content {
    background-image: url("../static/index/image/chose_user.png");
    width: 180px;
    height: 44px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 2px 5px 0 55px;
    position: absolute;
    left: 40px;
    top: 40px;

    p {
      margin: 0;
      padding: 0;
      color: #fff;
      font-size: 12px;
      height: 100%;
      line-height: 35px;
      padding-left: 20px;
    }
  }
  .exit-content {
    position: absolute;
    right: 20px;
    top: 44px;
    width: 180px;
    height: 44px;
    line-height: 44px;
    background: url("../static/login/image/chose_exit_on.png") no-repeat;
    cursor: pointer;
    padding-left: 65px;
    &:active {
      background: url("../static/login/image/chose_exit.png") no-repeat;
    }
    p {
      line-height: 46px;
      color: #ffffff;
    }
  }
  .content {
    height: 724px;
    position: absolute;
    top: 50%;
    margin-top: -362px;
    width: 1580px;
    left: 50%;
    margin-left: -790px;
    .returnOn {
      text-align: center;
      height: 70px;
      line-height: 70px;
      color: white;
      font-size: 20px;
      cursor: pointer;
      &:hover {
        color: aqua;
      }
    }
    .title {
      text-align: center;
      font-size: 30px;
      color: #c3e2f3;
      margin-bottom: 74px;
    }
    .choose-content {
      .choose-col {
        width: 33%;
        padding-left: 10px;
        padding-right: 10px;
        height: 500px;
        float: left;

        &:first-child {
          padding-left: 0;
        }
        &:last-child {
          padding-right: 0;
        }

        .item {
          width: 100%;
          height: 100%;
          text-align: center;
          padding-top: 130px;
          transition: all 0.5s;
          background-color: #3653637d;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
          border-radius: 5px;
          background-size: 100% 100%;
          background-repeat: no-repeat;

          &.sjzx {
            background-image: url("../static/index/image/chose_sjzx_bg_nor.png");

            .image {
              background-image: url("../static/index/image/chose_sjzx_nor.png");
            }

            &:hover {
              background-image: url("../static/index/image/chose_sjzx_bg_on.png");

              .image {
                background-image: url("../static/index/image/chose_sjzx_on.png");
              }
            }
          }
          &.sjfx {
            background-image: url("../static/index/image/chose_sjfx_bg_nor.png");

            .image {
              background-image: url("../static/index/image/chose_sjfx_nor.png");
            }

            &:hover {
              background-image: url("../static/index/image/chose_sjfx_bg_on.png");

              .image {
                background-image: url("../static/index/image/chose_sjfx_on.png");
              }
            }
          }
          &.cxjs {
            background-image: url("../static/index/image/chose_jscx_bg_nor.png");

            .image {
              background-image: url("../static/index/image/chose_jscx_nor.png");
            }

            &:hover {
              background-image: url("../static/index/image/chose_jscx_bg_on.png");

              .image {
                background-image: url("../static/index/image/chose_jscx_on.png");
              }
            }
          }
          // &.sjwh{
          //   background-image: url("../static/index/image/chose_sjwh_bg_nor.png");

          //   .image{
          //     background-image: url("../static/index/image/chose_sjwh_nor.png");
          //   }

          //   &:hover{
          //     background-image: url("../static/index/image/chose_sjwh_bg_on.png");

          //     .image{
          //       background-image: url("../static/index/image/chose_sjwh_on.png");
          //     }
          //   }
          // }
          // &.xtyw{
          //   background-image: url("../static/index/image/chose_xtyw_bg_nor.png");

          //   .image{
          //     background-image: url("../static/index/image/chose_xtyw_nor.png");
          //   }

          //   &:hover{
          //     background-image: url("../static/index/image/chose_xtyw_bg_on.png");

          //     .image{
          //       background-image: url("../static/index/image/chose_xtyw_on.png");
          //     }
          //   }
          // }

          .image {
            display: block;
            width: 150px;
            height: 150px;
            margin: 0 auto 32px;
            transition: all 0.5s;
          }

          p {
            // color: #3399cc;
            transition: all 0.5s;
          }
          p.title-chinese {
            font-size: 28px;
            margin-bottom: 14px;
          }
          p.title-pinyin {
            font-size: 16px;
          }
          .detail-btn {
            display: none;
            width: 120px;
            height: 40px;
            border: 1px solid #fff;
            font-size: 16px;
            color: #fff;
            margin: 84px auto 0;
            background: none;
            cursor: pointer;
            border-radius: 4px;
          }

          &:hover {
            padding-top: 70px;
            background-color: #1d6e9e63;
            p {
              color: #ffffff;
            }

            .detail-btn {
              display: block;
            }
          }
        }
      }
    }
  }
}
@media (max-width: 1919px) {
  .wrap {
    .content {
      height: 440px;
      margin-top: -220px;
      width: 1200px;
      margin-left: -600px;

      .title {
        text-align: center;
        font-size: 30px;
        color: #c3e2f3;
        margin-bottom: 30px;
      }
      .choose-content {
        .choose-col {
          height: 400px;

          .item {
            padding-top: 30px;

            .image {
              display: block;
              width: 150px;
              height: 150px;
              margin: 0 auto 32px;
              transition: all 0.5s;
            }

            .detail-btn {
              margin: 20px auto 0;
            }

            &:hover {
              padding-top: 10px;
            }
          }
        }
      }
    }
  }
}
</style>
